<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-row>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-form-item label="会员卡号" prop="mid">
          <el-input v-model="ruleForm.mid" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-form-item label="会员名" prop="mname">
          <el-input v-model="ruleForm.mname"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="8" :md="6" :lg="6" :xl="4">
        <el-form-item label="会员手机" prop="mphone">
          <el-input v-model="ruleForm.mphone"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    name: "AddMember",
    data() {
      const validateMphone = (rule, value, callback) => {
        const discountReg = /1(3[0-9]|4[5-9]|5[0-3]|5[5-9]|66|7[1-8]|8[0-9]|9[8-9])[0-9]{8}$/;
        // console.log(Number.isInteger(+value))
        if (!discountReg.test(value)) {
          callback(new Error('请检查电话号码是否为正常号码！'));
        }
        callback();
      };
      return {
        ruleForm: {
          mid: '',
          mname: '',
          mphone: '',
        },
        rules: {
          mname: [
            {required: true, message: '请输入客户姓名', trigger: 'change'}
          ],
          mphone: [
            {required: true, message: '请输入手机号吗', trigger: 'change'},
            {validator: validateMphone, trigger: 'change'}
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.Host + '/members/addMember',
              method: 'POST',
              data: {
                mid: this.ruleForm.mid,
                mname: this.ruleForm.mname,
                mphone: this.ruleForm.mphone,
              }
            }).then(result => {
              console.log(result.data.message === 'success')
              if (result.data.message === 'success') {
                this.ruleForm.mid = (parseInt(this.ruleForm.mid) + 1).toString()
                this.ruleForm.mname = ""
                this.ruleForm.mphone = ""
                console.log("dfsd")
                this.$message({
                  message: '添加成功！',
                  type: 'success'
                });
              }
            }).catch(error => {
              this.$message.error('添加失败！');
            })
          } else {
            this.$message.error('添加失败！');
            return false;
          }
        });
      },
      resetForm(formName) {
        const phone = this.ruleForm.mid
        this.$refs[formName].resetFields();
        this.ruleForm.mid = phone
      }
    },
    beforeCreate() {
      this.$http({
        url: this.Host + '/members/memberId',
        method: 'GET',
      }).then(result => {
        console.log(result.data.message === 'success')
        if (result.data.message === 'success') {
          console.log(result.data)
          this.ruleForm.mid = result.data.data
        }
      }).catch(error => {
        this.$message.error('添加失败！');
      })
    }
  }
</script>
